<template>
  <div class="container__auth">
    <div class="container__auth__header">
      <div class="container__auth__header__left iconfont" @click="toBack">
        &#xe84f;
      </div>
      <div class="container__auth__header__mid">角色认证</div>
      <div class="container__auth__header__right"></div>
    </div>
    <div class="container__auth__mid">
      <input
        type="text"
        placeholder="请输入你的名字"
        v-model="userAuthData.username"
      />
      <input
        type="text"
        placeholder="请输入你的医院名称"
        v-model="userAuthData.hospital"
      />
      <select name="aaa" id="" v-model="userAuthData.hospitaltype">
        <option value="">请选择你的医院等级</option>
        <option value="三级甲等">三级甲等</option>
        <option value="三级乙等">三级乙等</option>
        <option value="三级丙等">三级丙等</option>
        <option value="二级甲等">二级甲等</option>
        <option value="二级乙等">二级乙等</option>
        <option value="二级丙等">二级丙等</option>
        <option value="一级甲等">一级甲等</option>
        <option value="一级乙等">一级乙等</option>
        <option value="一级丙等">一级丙等</option>
      </select>
      <select name="aaa" id="" v-model="userAuthData.occupation">
        <option value="">请选择你的角色</option>
        <option value="doctor">医生</option>
        <option value="user">用户</option>
      </select>
      <select name="aaa" id="" v-model="userAuthData.role">
        <option value="">请选择你的职务名称</option>
        <option value="主任医师">主任医师</option>
        <option value="实习护士">实习护士</option>
        <option value="实习医师">实习医师</option>
      </select>
      <input
        type="text"
        placeholder="请输入你的主治科室"
        v-model="userAuthData.section_office"
      />
      <input
        type="text"
        placeholder="请描述你的优势"
        v-model="userAuthData.describe"
      />
      <input
        type="text"
        placeholder="请输入你的头像地址(选填)"
        v-model="userAuthData.headImg"
      />
    </div>
    <div class="container__auth__bottom">
      <button class="container__auth__bottom__btn" @click="toAuth">
        立即认证
      </button>
    </div>
  </div>
  <transition
    enter-active-class="animate__animated animate__bounceInLeft"
    leave-active-class="animate__animated animate__bounceOutRight"
  >
    <Toast v-if="isShow" :message="toastMessage" />
  </transition>
</template>
<script setup>
import { ref, reactive } from "vue";
import api from "../api";
import { useBackRouterEffect } from "../components/effects/backEffect";
import storage from "../utils/storage";
import Toast, { showToastEffect } from "../components/Toast.vue";

import { useRouter } from "vue-router";

const toBack = useBackRouterEffect();
const router = useRouter();
const { showToast, isShow, toastMessage } = showToastEffect();

const userInfo = storage.getItem("userInfo");
const userAuthData = reactive({
  username: userInfo?.username,
  hospital: userInfo?.hospital,
  hospitaltype: userInfo?.hospitaltype,
  occupation: userInfo?.occupation,
  role: userInfo?.role,
  section_office: userInfo?.section_office,
  headImg: "",
  describe: userInfo?.describe,
});
const phone = userInfo?.phone;
userAuthData.phone = phone;
function toAuth() {
  if (
    userAuthData.username.value ||
    userAuthData.username.value ||
    userAuthData.hospital.value ||
    userAuthData.hospitaltype.value ||
    userAuthData.occupation.value ||
    userAuthData.role.value ||
    userAuthData.section_office.value ||
    userAuthData.describe.value
  ) {
    showToast("信息输入框不能为空");
    return;
  } else {
    api.userAuth(userAuthData).then((res) => {
      if (res) {
        showToast("认证成功");
        api.getUserInfo({ phone }).then((res) => {
          storage.setItem("userInfo", res);
        });
        setTimeout(() => {
          router.push("/login");
        }, 2000);
      } else {
        showToast("认证失败");
      }
    });
  }
}
</script>
<style lang="scss" scoped>
.container__auth {
  width: 414rem;

  &__header {
    width: 414rem;
    height: 88rem;
    background-color: #6481da;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20rem;
    color: #fff;
    padding: 44rem 20rem 0 20rem;
    box-sizing: border-box;
  }
  &__mid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background-color: #ffffff;

    & input,
    select {
      width: 350rem;
      height: 50rem;
      margin: 20rem 0;
      font-size: 18rem;
      border: 0;
      border-bottom: 2rem solid #b8b8b8;
      background-color: #ffffff00;
    }
  }
  &__bottom {
    width: 414rem;
    display: flex;
    justify-content: center;
    &__btn {
      width: 70%;
      height: 50rem;
      font-size: 18rem;
      background-color: #fff;
      margin-top: 20rem;
      border-radius: 10rem;
    }
  }
}
</style>
